<template>
  <div class="app-container">
    <el-table :data="instructistList" :header-cell-style="{ 'text-align': 'center' }"
      :cell-style="{ 'text-align': 'center' }">
      <el-table-column property="cmdType" label="指令编码"></el-table-column>
      <el-table-column property="dictLabel" label="下发指令"></el-table-column>
      <el-table-column property="gatewayLabel" label="网关标签"></el-table-column>
      <el-table-column property="gatewayName" label="网关名字"></el-table-column>
      <el-table-column property="message" label="指令信息" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column property="psLabel" label="逆变器标签"></el-table-column>
      <el-table-column property="replyState" label="状态">
        <template #default="{ row }">
          <p v-if="row.replyState == 0">未回复</p>
          <p v-if="row.replyState == 1">已回复</p>
        </template>
        <!--  -->
      </el-table-column>
      <el-table-column property="sendTime" label="发送时间">
        <template #default="{ row }">
          {{ format.FormatDate(row.sendTime) }}
        </template>
        <!--  -->
      </el-table-column>
    </el-table>
    <!-- 分页区 -->
    <div class="block" style="margin: 20px">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryData.page" :page-size="queryData.pagesize" :page-sizes="[2, 4, 6, 8, 10]"
        layout="sizes, prev, pager, next,total, jumper" :total="queryData.total"> </el-pagination>
    </div>
  </div>
</template>

<script name='Instruct' setup lang="ts">
import { getInstructist } from '@/api/system/instruct/instruct';
import format from '@/utils/format'
    const instructistList = ref([]) //用户列表
    // 分页
      const queryData = ref( {
      page: 1, // 当前页码
      pagesize: 10,
      total: 0, // 总数
    })
    onMounted(()=>{
      // 获取用户信息
      getInstructistList();
    }) 
    const getInstructistList =  async ()=>{
      let res = await getInstructist({
        pageNo: queryData.value.page,
        pageSize: queryData.value.pagesize,
      });
      queryData.value.total = res.data.total;

      instructistList.value = res.data.list;
    }
    // 分页
    const handleSizeChange = (val)=> {
      queryData.value.pagesize = val;
      getInstructistList();
    }
    const handleCurrentChange = (val)=> {
      queryData.value.page = val;
      getInstructistList();
    }
</script>
<style lang="scss">
.el-tooltip__popper {
  max-width: 50%;
}

.T {
  display: flex;
  justify-content: space-between;
  align-items: center;

  // 查询按钮
  .el-button--primary {
    color: #ffffff;
    background-color: #305add;
    border-color: #305add;
  }

  // 导出按钮
  .export {
    width: 70px;
    height: 36px;
    border-radius: 4px;
    border: 1px solid #dddfe6;
    font-size: 14px;
    text-align: center;
    line-height: 36px;
    cursor: pointer;
  }
}

// 弹框里的分页
.block {
  // display: flex;
  display: -webkit-box;
  justify-content: end;
}</style>
